<template>
<div>
  <Modal v-model="mapPolygonForCommunityModal" title="社区范围选取" fullscreen  @on-ok="mapPolygonForCommunityConfirm">
    <Card class="cardStrleClass">
      <Row>
        <Col span="12">
          <div style="width: 20px;height: 20px;background-color: #E066FF"></div>
        </Col>
        <Col span="12">
          <span style="color:#E066FF">小区</span>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <div style="width: 20px;height: 20px;background-color: #3CB371"></div>
        </Col>
        <Col span="12">
          <span style="color:#3CB371">网格</span>
        </Col>
      </Row>
    </Card>
    <div id="mapPolygonForCommunity"></div>
  </Modal>
</div>
</template>

<script>
import { autoPolygonCommunity, getCenter } from '../../../../libs/util'
import {
  findGardenCommunityList, findGardenStreetList,
  findResidentialCommunityList,
  findResidentialStreetList,
  newGetCompanyInfo
} from '../../../../api/z-new-grid'

export default {
  name: 'mapPolygonForCommunity',
  data () {
    return {
      map: null,
      mapPolygonForCommunityModal: false,
      choiceInfo: {},
      companyInfo: {},
      communityResidential: [],
      comunityGarden: [],
      polygons: [],
      operationType: '',
      returnObject: {}
    }
  },
  methods: {
    init (e1, e2) {
      this.choiceInfo = e1
      this.companyInfo = e2
      this.newGetCompanyInfo()
    },
    newGetCompanyInfo () {
      let data = {
        id: this.companyInfo.id
      }
      newGetCompanyInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.companyInfo = ret.data.data
          this.dispostData()
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    dispostData () {
      if (this.companyInfo.csc_mapjson === undefined || this.companyInfo.csc_mapjson === '' || !this.companyInfo.csc_mapjson) {
        this.$Notice.error({ title: '中心点异常！', desc: '中心点为空，请先选择中心点！' })
        return
      }
      if (this.companyInfo.company_scope === undefined || this.companyInfo.company_scope === '') {
        this.operationType = 'create'
      } else {
        this.operationType = 'update'
      }
      this.mapPolygonForCommunityModal = true
      let _this = this
      setTimeout(function () {
        _this.initMap(getCenter(_this.companyInfo, _this))
      }, 1000)
    },
    initMap (e) {
      this.map = new AMap.Map('mapPolygonForCommunity', {
        resizeEnable: true,
        center: new AMap.LngLat(e.lng, e.lat),
        zoom: 15
      })
      if (this.operationType === 'create') {
        this.polygons = autoPolygonCommunity(e)
        this.createPolygon()
      }
      if (this.operationType === 'update') {
        this.updatePolygon()
      }
      this.createMaker(e)
      console.log(this.companyInfo)
      if (this.companyInfo.grade === '4') {
        this.findResidentialStreetList()
        this.findGardenStreetList()
      }
      if (this.companyInfo.grade === '5') {
        this.findCommunityResidentialList()
        this.findCommunityGardenList()
      }
    },
    createMaker (e) {
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(e.lng, e.lat)
      })
      this.map.add(this.marker)
    },
    createPolygon () {
      var path = []
      let data = this.polygons
      data.forEach(item => {
        path.push(new AMap.LngLat(item[0], item[1]))
      })
      var Polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#1E9FFF',
        strokeWeight: 2,
        strokeStyle: 'solid',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#1E9FFF',
        zIndex: 50
      })
      Polygon.on('mouseover', function (e) {
        Polygon.setOptions({
          fillColor: '#FFB800'
        })
      })
      Polygon.on('mouseout', function (e) {
        Polygon.setOptions({
          fillColor: '#1E9FFF'
        })
      })
      this.Polygon = Polygon
      var polyEditor = new AMap.PolyEditor(this.map, this.Polygon)
      polyEditor.open()
      this.map.setFitView([ Polygon ])
      this.map.setZoom(this.map.getZoom() - 2)
      this.map.add(Polygon)
    },
    updatePolygon () {
      var path = []
      let data = JSON.parse(this.companyInfo.company_scope)
      data.forEach(item => {
        path.push(new AMap.LngLat(item[0], item[1]))
      })
      var Polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#1E9FFF',
        strokeWeight: 2,
        strokeStyle: 'solid',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#1E9FFF',
        zIndex: 50
      })
      Polygon.on('mouseover', function (e) {
        Polygon.setOptions({
          fillColor: '#FFB800'
        })
      })
      Polygon.on('mouseout', function (e) {
        Polygon.setOptions({
          fillColor: '#1E9FFF'
        })
      })
      this.Polygon = Polygon
      var polyEditor = new AMap.PolyEditor(this.map, this.Polygon)
      polyEditor.open()
      this.map.setFitView([ Polygon ])
      this.map.setZoom(this.map.getZoom() - 1)
      this.map.add(Polygon)
    },
    mapPolygonForCommunityConfirm () {
      this.returnObject.polygonResult = {}
      // isRingInRing(ring:[LngLat],ring:[LngLat])
      for (var i = 0; i < this.comunityGarden.length; i++) {
        var path = []
        let data = JSON.parse(this.comunityGarden[i].csc_mapjson)
        data.forEach(item1 => {
          path.push(new AMap.LngLat(item1[0], item1[1]))
        })
        var Polygon = new AMap.Polygon({
          path: path,
          strokeColor: '#1E9FFF',
          strokeWeight: 2,
          strokeStyle: 'solid',
          strokeOpacity: 1,
          fillOpacity: 0.1,
          fillColor: '#1E9FFF',
          zIndex: 50,
          extData: {
            name: this.comunityGarden[i].name
          }
        })
        let result = AMap.GeometryUtil.isRingInRing(Polygon.getPath(), this.Polygon.getPath())
        if (!result) {
          this.$Notice.error({ title: '绘制失败！', desc: '社区范围未完全包含' + Polygon.getExtData().name })
          this.returnObject.polygonResult = {
            name: Polygon.getExtData().name
          }
          break
        }
      }
      this.polygons = this.Polygon.getPath()
      let newpath = []
      this.polygons.forEach(item => {
        let lng = item.lng
        let lat = item.lat
        let point = [lng, lat]
        newpath.push(point)
      })
      var resultPolyons = JSON.stringify(newpath)
      this.returnObject.company_scope = resultPolyons
      this.$emit('returnMapPolygonInfoForCommunity', this.returnObject)
    },
    findResidentialStreetList () {
      findResidentialStreetList().then(ret => {
        if (ret.data.errcode === 0) {
          this.communityResidential = ret.data.data
          this.communityResidential.forEach(item => {
            if (item.csc_mapjson) {
              try {
                this.findCommunityResidentiallygon(JSON.parse(item.csc_mapjson))
              } catch (e) {
                console.log(e)
              }
            }
          })
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    findCommunityResidentialList () {
      findResidentialCommunityList().then(ret => {
        if (ret.data.errcode === 0) {
          this.communityResidential = ret.data.data
          this.communityResidential.forEach(item => {
            if (item.csc_mapjson) {
              try {
                this.findCommunityResidentiallygon(JSON.parse(item.csc_mapjson))
              } catch (e) {
                console.log(e)
              }
            }
          })
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    findGardenStreetList () {
      findGardenStreetList().then(ret => {
        if (ret.data.errcode === 0) {
          this.comunityGarden = ret.data.data
          this.comunityGarden.forEach(item => {
            if (item.csc_mapjson) {
              try {
                this.findCommunityGardenlygon(JSON.parse(item.csc_mapjson))
              } catch (e) {
                console.log(e)
              }
            }
          })
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    findCommunityGardenList () {
      findGardenCommunityList().then(ret => {
        if (ret.data.errcode === 0) {
          this.comunityGarden = ret.data.data
          this.comunityGarden.forEach(item => {
            if (item.csc_mapjson) {
              try {
                this.findCommunityGardenlygon(JSON.parse(item.csc_mapjson))
              } catch (e) {
                console.log(e)
              }
            }
          })
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    findCommunityResidentiallygon (e) {
      var path = []
      let data = e
      data.forEach(item => {
        path.push(new AMap.LngLat(item[0], item[1]))
      })
      var Polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#E066FF',
        strokeWeight: 2,
        strokeStyle: 'solid',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#E066FF',
        zIndex: 40
      })
      Polygon.on('mouseover', function (e) {
        Polygon.setOptions({
          fillColor: '#EEDC82'
        })
      })
      Polygon.on('mouseout', function (e) {
        Polygon.setOptions({
          fillColor: '#E066FF'
        })
      })
      this.map.add(Polygon)
    },
    findCommunityGardenlygon (e) {
      var path = []
      let data = e
      data.forEach(item => {
        path.push(new AMap.LngLat(item[0], item[1]))
      })
      var Polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#3CB371',
        strokeWeight: 2,
        strokeStyle: 'solid',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#3CB371',
        zIndex: 40
      })
      Polygon.on('mouseover', function (e) {
        Polygon.setOptions({
          fillColor: '#EEDC82'
        })
      })
      Polygon.on('mouseout', function (e) {
        Polygon.setOptions({
          fillColor: '#3CB371'
        })
      })
      this.map.add(Polygon)
    }
  },
  beforeDestroy () {
    this.map && this.map.destroy()
  },
  watch: {
    mapPolygonForCommunityModal (val) {
      if (!val) {
        this.map && this.map.destroy()
      }
    }
  }
}
</script>

<style scoped>
#mapPolygonForCommunity {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.cardStrleClass{
  width:100px;
  position: absolute;
  z-index: 99;
  top: 25px;
  left: 25px
}
</style>
